<template>
	<div class="item" @click="item_click">
		<div v-show="is_show">
			<slot name="img1"></slot>
		</div>
		<div v-show="!is_show">
			<slot name="img2"></slot>
		</div>
		<div :style="titel_text_style">
			<slot name="titel"></slot>
		</div>
	</div>
</template>

<script>
	export default({
		name:'tabbar_item',
		props:{
			path:String,
			titel_text_color:{  //动态接收一个对象用来觉得字体颜色的显示,如果没有传入则使用默认值
				typr:String,
				default:'#d81e06'
			}
		},
		data(){
			return{
				// is_show:true
			}
		},
		computed:{
			is_show(){
				return !(this.$route.path===this.path)  //返回当前活动页面的地址和props获取的地址是否一致,然后取反 就是fals
			},
			titel_text_style(){
				return !(this.is_show) ?{color: this.titel_text_color} : {}
			}
		},
		methods:{
			item_click(){
				this.$router.push(this.path)
			}
		}
	})
</script>
<style>
	.item{
		flex: 1;
		text-align: center;
		height: 3.0625rem;
		font-size: 0.875rem;
	}
	img{
		height: 1.875rem;
		vertical-align: middle;
		margin-top: 0.125rem;
	}
/* 	.active{
		color: #d81e06;
	} */
</style>
